Code Playground

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.loader {
  position: absolute;
  filter: blur(4px) contrast(4);
}
.loader::before {
  content: "";
  position: absolute;
  inset: -200px;
  background-color: #000;
}
.loader div {
  position: absolute;
  inset: -4px;
  background-color: #fff;
  border-radius: 50%;
  transform: rotate(var(--rz, 0)) translateY(120px);
  -webkit-animation: mid 3s var(--midDelay, 0s) infinite linear;
          animation: mid 3s var(--midDelay, 0s) infinite linear;
}
@-webkit-keyframes mid {
  0% {
    background-color: white;
  }
  20%, 100% {
    background-color: transparent;
  }
}
@keyframes mid {
  0% {
    background-color: white;
  }
  20%, 100% {
    background-color: transparent;
  }
}
.loader div::before, .loader div::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background-color: hsl(var(--_hue, var(--hue)), 100%, 50%);
  -webkit-animation: move 3s var(--_delay, var(--delay)) infinite ease-in-out;
          animation: move 3s var(--_delay, var(--delay)) infinite ease-in-out;
}
@-webkit-keyframes move {
  0%, 100% {
    transform: translateY(var(--_ty, var(--ty))) scale(0);
  }
  50% {
    transform: translateY(var(--_ty, var(--ty))) scale(1);
  }
}
@keyframes move {
  0%, 100% {
    transform: translateY(var(--_ty, var(--ty))) scale(0);
  }
  50% {
    transform: translateY(var(--_ty, var(--ty))) scale(1);
  }
}
.loader div::after {
  --_ty: calc(var(--ty) * -1);
  --_hue: calc(var(--hue) + 180);
  --_delay: calc(var(--delay) - 0.3s);
}
.loader div:nth-child(1) {
  --rz: 0deg;
  --delay: 0s;
  --midDelay: -3s;
  --ty: 0%;
  --hue: 0;
}
.loader div:nth-child(2) {
  --rz: 3deg;
  --delay: -0.075s;
  --midDelay: -2.975s;
  --ty: 35.8367949545%;
  --hue: 3;
}
.loader div:nth-child(3) {
  --rz: 6deg;
  --delay: -0.15s;
  --midDelay: -2.95s;
  --ty: 66.9130606359%;
  --hue: 6;
}
.loader div:nth-child(4) {
  --rz: 9deg;
  --delay: -0.225s;
  --midDelay: -2.925s;
  --ty: 89.1006524188%;
  --hue: 9;
}
.loader div:nth-child(5) {
  --rz: 12deg;
  --delay: -0.3s;
  --midDelay: -2.9s;
  --ty: 99.4521895368%;
  --hue: 12;
}
.loader div:nth-child(6) {
  --rz: 15deg;
  --delay: -0.375s;
  --midDelay: -2.875s;
  --ty: 96.5925826289%;
  --hue: 15;
}
.loader div:nth-child(7) {
  --rz: 18deg;
  --delay: -0.45s;
  --midDelay: -2.85s;
  --ty: 80.9016994375%;
  --hue: 18;
}
.loader div:nth-child(8) {
  --rz: 21deg;
  --delay: -0.525s;
  --midDelay: -2.825s;
  --ty: 54.4639035015%;
  --hue: 21;
}
.loader div:nth-child(9) {
  --rz: 24deg;
  --delay: -0.6s;
  --midDelay: -2.8s;
  --ty: 20.7911690818%;
  --hue: 24;
}
.loader div:nth-child(10) {
  --rz: 27deg;
  --delay: -0.675s;
  --midDelay: -2.775s;
  --ty: -15.643446504%;
  --hue: 27;
}
.loader div:nth-child(11) {
  --rz: 30deg;
  --delay: -0.75s;
  --midDelay: -2.75s;
  --ty: -50%;
  --hue: 30;
}
.loader div:nth-child(12) {
  --rz: 33deg;
  --delay: -0.825s;
  --midDelay: -2.725s;
  --ty: -77.7145961457%;
  --hue: 33;
}
.loader div:nth-child(13) {
  --rz: 36deg;
  --delay: -0.9s;
  --midDelay: -2.7s;
  --ty: -95.1056516295%;
  --hue: 36;
}
.loader div:nth-child(14) {
  --rz: 39deg;
  --delay: -0.975s;
  --midDelay: -2.675s;
  --ty: -99.8629534755%;
  --hue: 39;
}
.loader div:nth-child(15) {
  --rz: 42deg;
  --delay: -1.05s;
  --midDelay: -2.65s;
  --ty: -91.3545457643%;
  --hue: 42;
}
.loader div:nth-child(16) {
  --rz: 45deg;
  --delay: -1.125s;
  --midDelay: -2.625s;
  --ty: -70.7106781187%;
  --hue: 45;
}
.loader div:nth-child(17) {
  --rz: 48deg;
  --delay: -1.2s;
  --midDelay: -2.6s;
  --ty: -40.6736643076%;
  --hue: 48;
}
.loader div:nth-child(18) {
  --rz: 51deg;
  --delay: -1.275s;
  --midDelay: -2.575s;
  --ty: -5.2335956243%;
  --hue: 51;
}
.loader div:nth-child(19) {
  --rz: 54deg;
  --delay: -1.35s;
  --midDelay: -2.55s;
  --ty: 30.9016994375%;
  --hue: 54;
}
.loader div:nth-child(20) {
  --rz: 57deg;
  --delay: -1.425s;
  --midDelay: -2.525s;
  --ty: 62.932039105%;
  --hue: 57;
}
.loader div:nth-child(21) {
  --rz: 60deg;
  --delay: -1.5s;
  --midDelay: -2.5s;
  --ty: 86.6025403784%;
  --hue: 60;
}
.loader div:nth-child(22) {
  --rz: 63deg;
  --delay: -1.575s;
  --midDelay: -2.475s;
  --ty: 98.7688340595%;
  --hue: 63;
}
.loader div:nth-child(23) {
  --rz: 66deg;
  --delay: -1.65s;
  --midDelay: -2.45s;
  --ty: 97.8147600734%;
  --hue: 66;
}
.loader div:nth-child(24) {
  --rz: 69deg;
  --delay: -1.725s;
  --midDelay: -2.425s;
  --ty: 83.8670567945%;
  --hue: 69;
}
.loader div:nth-child(25) {
  --rz: 72deg;
  --delay: -1.8s;
  --midDelay: -2.4s;
  --ty: 58.7785252292%;
  --hue: 72;
}
.loader div:nth-child(26) {
  --rz: 75deg;
  --delay: -1.875s;
  --midDelay: -2.375s;
  --ty: 25.8819045103%;
  --hue: 75;
}
.loader div:nth-child(27) {
  --rz: 78deg;
  --delay: -1.95s;
  --midDelay: -2.35s;
  --ty: -10.4528463268%;
  --hue: 78;
}
.loader div:nth-child(28) {
  --rz: 81deg;
  --delay: -2.025s;
  --midDelay: -2.325s;
  --ty: -45.399049974%;
  --hue: 81;
}
.loader div:nth-child(29) {
  --rz: 84deg;
  --delay: -2.1s;
  --midDelay: -2.3s;
  --ty: -74.3144825477%;
  --hue: 84;
}
.loader div:nth-child(30) {
  --rz: 87deg;
  --delay: -2.175s;
  --midDelay: -2.275s;
  --ty: -93.3580426497%;
  --hue: 87;
}
.loader div:nth-child(31) {
  --rz: 90deg;
  --delay: -2.25s;
  --midDelay: -2.25s;
  --ty: -100%;
  --hue: 90;
}
.loader div:nth-child(32) {
  --rz: 93deg;
  --delay: -2.325s;
  --midDelay: -2.225s;
  --ty: -93.3580426497%;
  --hue: 93;
}
.loader div:nth-child(33) {
  --rz: 96deg;
  --delay: -2.4s;
  --midDelay: -2.2s;
  --ty: -74.3144825477%;
  --hue: 96;
}
.loader div:nth-child(34) {
  --rz: 99deg;
  --delay: -2.475s;
  --midDelay: -2.175s;
  --ty: -45.399049974%;
  --hue: 99;
}
.loader div:nth-child(35) {
  --rz: 102deg;
  --delay: -2.55s;
  --midDelay: -2.15s;
  --ty: -10.4528463268%;
  --hue: 102;
}
.loader div:nth-child(36) {
  --rz: 105deg;
  --delay: -2.625s;
  --midDelay: -2.125s;
  --ty: 25.8819045103%;
  --hue: 105;
}
.loader div:nth-child(37) {
  --rz: 108deg;
  --delay: -2.7s;
  --midDelay: -2.1s;
  --ty: 58.7785252292%;
  --hue: 108;
}
.loader div:nth-child(38) {
  --rz: 111deg;
  --delay: -2.775s;
  --midDelay: -2.075s;
  --ty: 83.8670567945%;
  --hue: 111;
}
.loader div:nth-child(39) {
  --rz: 114deg;
  --delay: -2.85s;
  --midDelay: -2.05s;
  --ty: 97.8147600734%;
  --hue: 114;
}
.loader div:nth-child(40) {
  --rz: 117deg;
  --delay: -2.925s;
  --midDelay: -2.025s;
  --ty: 98.7688340595%;
  --hue: 117;
}
.loader div:nth-child(41) {
  --rz: 120deg;
  --delay: -3s;
  --midDelay: -2s;
  --ty: 86.6025403784%;
  --hue: 120;
}
.loader div:nth-child(42) {
  --rz: 123deg;
  --delay: -3.075s;
  --midDelay: -1.975s;
  --ty: 62.932039105%;
  --hue: 123;
}
.loader div:nth-child(43) {
  --rz: 126deg;
  --delay: -3.15s;
  --midDelay: -1.95s;
  --ty: 30.9016994375%;
  --hue: 126;
}
.loader div:nth-child(44) {
  --rz: 129deg;
  --delay: -3.225s;
  --midDelay: -1.925s;
  --ty: -5.2335956243%;
  --hue: 129;
}
.loader div:nth-child(45) {
  --rz: 132deg;
  --delay: -3.3s;
  --midDelay: -1.9s;
  --ty: -40.6736643076%;
  --hue: 132;
}
.loader div:nth-child(46) {
  --rz: 135deg;
  --delay: -3.375s;
  --midDelay: -1.875s;
  --ty: -70.7106781187%;
  --hue: 135;
}
.loader div:nth-child(47) {
  --rz: 138deg;
  --delay: -3.45s;
  --midDelay: -1.85s;
  --ty: -91.3545457643%;
  --hue: 138;
}
.loader div:nth-child(48) {
  --rz: 141deg;
  --delay: -3.525s;
  --midDelay: -1.825s;
  --ty: -99.8629534755%;
  --hue: 141;
}
.loader div:nth-child(49) {
  --rz: 144deg;
  --delay: -3.6s;
  --midDelay: -1.8s;
  --ty: -95.1056516295%;
  --hue: 144;
}
.loader div:nth-child(50) {
  --rz: 147deg;
  --delay: -3.675s;
  --midDelay: -1.775s;
  --ty: -77.7145961457%;
  --hue: 147;
}
.loader div:nth-child(51) {
  --rz: 150deg;
  --delay: -3.75s;
  --midDelay: -1.75s;
  --ty: -50%;
  --hue: 150;
}
.loader div:nth-child(52) {
  --rz: 153deg;
  --delay: -3.825s;
  --midDelay: -1.725s;
  --ty: -15.643446504%;
  --hue: 153;
}
.loader div:nth-child(53) {
  --rz: 156deg;
  --delay: -3.9s;
  --midDelay: -1.7s;
  --ty: 20.7911690818%;
  --hue: 156;
}
.loader div:nth-child(54) {
  --rz: 159deg;
  --delay: -3.975s;
  --midDelay: -1.675s;
  --ty: 54.4639035015%;
  --hue: 159;
}
.loader div:nth-child(55) {
  --rz: 162deg;
  --delay: -4.05s;
  --midDelay: -1.65s;
  --ty: 80.9016994375%;
  --hue: 162;
}
.loader div:nth-child(56) {
  --rz: 165deg;
  --delay: -4.125s;
  --midDelay: -1.625s;
  --ty: 96.5925826289%;
  --hue: 165;
}
.loader div:nth-child(57) {
  --rz: 168deg;
  --delay: -4.2s;
  --midDelay: -1.6s;
  --ty: 99.4521895368%;
  --hue: 168;
}
.loader div:nth-child(58) {
  --rz: 171deg;
  --delay: -4.275s;
  --midDelay: -1.575s;
  --ty: 89.1006524188%;
  --hue: 171;
}
.loader div:nth-child(59) {
  --rz: 174deg;
  --delay: -4.35s;
  --midDelay: -1.55s;
  --ty: 66.9130606359%;
  --hue: 174;
}
.loader div:nth-child(60) {
  --rz: 177deg;
  --delay: -4.425s;
  --midDelay: -1.525s;
  --ty: 35.8367949545%;
  --hue: 177;
}
.loader div:nth-child(61) {
  --rz: 180deg;
  --delay: -4.5s;
  --midDelay: -1.5s;
  --ty: 0%;
  --hue: 180;
}
.loader div:nth-child(62) {
  --rz: 183deg;
  --delay: -4.575s;
  --midDelay: -1.475s;
  --ty: -35.8367949545%;
  --hue: 183;
}
.loader div:nth-child(63) {
  --rz: 186deg;
  --delay: -4.65s;
  --midDelay: -1.45s;
  --ty: -66.9130606359%;
  --hue: 186;
}
.loader div:nth-child(64) {
  --rz: 189deg;
  --delay: -4.725s;
  --midDelay: -1.425s;
  --ty: -89.1006524188%;
  --hue: 189;
}
.loader div:nth-child(65) {
  --rz: 192deg;
  --delay: -4.8s;
  --midDelay: -1.4s;
  --ty: -99.4521895368%;
  --hue: 192;
}
.loader div:nth-child(66) {
  --rz: 195deg;
  --delay: -4.875s;
  --midDelay: -1.375s;
  --ty: -96.5925826289%;
  --hue: 195;
}
.loader div:nth-child(67) {
  --rz: 198deg;
  --delay: -4.95s;
  --midDelay: -1.35s;
  --ty: -80.9016994375%;
  --hue: 198;
}
.loader div:nth-child(68) {
  --rz: 201deg;
  --delay: -5.025s;
  --midDelay: -1.325s;
  --ty: -54.4639035015%;
  --hue: 201;
}
.loader div:nth-child(69) {
  --rz: 204deg;
  --delay: -5.1s;
  --midDelay: -1.3s;
  --ty: -20.7911690818%;
  --hue: 204;
}
.loader div:nth-child(70) {
  --rz: 207deg;
  --delay: -5.175s;
  --midDelay: -1.275s;
  --ty: 15.643446504%;
  --hue: 207;
}
.loader div:nth-child(71) {
  --rz: 210deg;
  --delay: -5.25s;
  --midDelay: -1.25s;
  --ty: 50%;
  --hue: 210;
}
.loader div:nth-child(72) {
  --rz: 213deg;
  --delay: -5.325s;
  --midDelay: -1.225s;
  --ty: 77.7145961457%;
  --hue: 213;
}
.loader div:nth-child(73) {
  --rz: 216deg;
  --delay: -5.4s;
  --midDelay: -1.2s;
  --ty: 95.1056516295%;
  --hue: 216;
}
.loader div:nth-child(74) {
  --rz: 219deg;
  --delay: -5.475s;
  --midDelay: -1.175s;
  --ty: 99.8629534755%;
  --hue: 219;
}
.loader div:nth-child(75) {
  --rz: 222deg;
  --delay: -5.55s;
  --midDelay: -1.15s;
  --ty: 91.3545457643%;
  --hue: 222;
}
.loader div:nth-child(76) {
  --rz: 225deg;
  --delay: -5.625s;
  --midDelay: -1.125s;
  --ty: 70.7106781187%;
  --hue: 225;
}
.loader div:nth-child(77) {
  --rz: 228deg;
  --delay: -5.7s;
  --midDelay: -1.1s;
  --ty: 40.6736643076%;
  --hue: 228;
}
.loader div:nth-child(78) {
  --rz: 231deg;
  --delay: -5.775s;
  --midDelay: -1.075s;
  --ty: 5.2335956243%;
  --hue: 231;
}
.loader div:nth-child(79) {
  --rz: 234deg;
  --delay: -5.85s;
  --midDelay: -1.05s;
  --ty: -30.9016994375%;
  --hue: 234;
}
.loader div:nth-child(80) {
  --rz: 237deg;
  --delay: -5.925s;
  --midDelay: -1.025s;
  --ty: -62.932039105%;
  --hue: 237;
}
.loader div:nth-child(81) {
  --rz: 240deg;
  --delay: -6s;
  --midDelay: -1s;
  --ty: -86.6025403784%;
  --hue: 240;
}
.loader div:nth-child(82) {
  --rz: 243deg;
  --delay: -6.075s;
  --midDelay: -0.975s;
  --ty: -98.7688340595%;
  --hue: 243;
}
.loader div:nth-child(83) {
  --rz: 246deg;
  --delay: -6.15s;
  --midDelay: -0.95s;
  --ty: -97.8147600734%;
  --hue: 246;
}
.loader div:nth-child(84) {
  --rz: 249deg;
  --delay: -6.225s;
  --midDelay: -0.925s;
  --ty: -83.8670567945%;
  --hue: 249;
}
.loader div:nth-child(85) {
  --rz: 252deg;
  --delay: -6.3s;
  --midDelay: -0.9s;
  --ty: -58.7785252292%;
  --hue: 252;
}
.loader div:nth-child(86) {
  --rz: 255deg;
  --delay: -6.375s;
  --midDelay: -0.875s;
  --ty: -25.8819045103%;
  --hue: 255;
}
.loader div:nth-child(87) {
  --rz: 258deg;
  --delay: -6.45s;
  --midDelay: -0.85s;
  --ty: 10.4528463268%;
  --hue: 258;
}
.loader div:nth-child(88) {
  --rz: 261deg;
  --delay: -6.525s;
  --midDelay: -0.825s;
  --ty: 45.399049974%;
  --hue: 261;
}
.loader div:nth-child(89) {
  --rz: 264deg;
  --delay: -6.6s;
  --midDelay: -0.8s;
  --ty: 74.3144825477%;
  --hue: 264;
}
.loader div:nth-child(90) {
  --rz: 267deg;
  --delay: -6.675s;
  --midDelay: -0.775s;
  --ty: 93.3580426497%;
  --hue: 267;
}
.loader div:nth-child(91) {
  --rz: 270deg;
  --delay: -6.75s;
  --midDelay: -0.75s;
  --ty: 100%;
  --hue: 270;
}
.loader div:nth-child(92) {
  --rz: 273deg;
  --delay: -6.825s;
  --midDelay: -0.725s;
  --ty: 93.3580426497%;
  --hue: 273;
}
.loader div:nth-child(93) {
  --rz: 276deg;
  --delay: -6.9s;
  --midDelay: -0.7s;
  --ty: 74.3144825477%;
  --hue: 276;
}
.loader div:nth-child(94) {
  --rz: 279deg;
  --delay: -6.975s;
  --midDelay: -0.675s;
  --ty: 45.399049974%;
  --hue: 279;
}
.loader div:nth-child(95) {
  --rz: 282deg;
  --delay: -7.05s;
  --midDelay: -0.65s;
  --ty: 10.4528463268%;
  --hue: 282;
}
.loader div:nth-child(96) {
  --rz: 285deg;
  --delay: -7.125s;
  --midDelay: -0.625s;
  --ty: -25.8819045103%;
  --hue: 285;
}
.loader div:nth-child(97) {
  --rz: 288deg;
  --delay: -7.2s;
  --midDelay: -0.6s;
  --ty: -58.7785252292%;
  --hue: 288;
}
.loader div:nth-child(98) {
  --rz: 291deg;
  --delay: -7.275s;
  --midDelay: -0.575s;
  --ty: -83.8670567945%;
  --hue: 291;
}
.loader div:nth-child(99) {
  --rz: 294deg;
  --delay: -7.35s;
  --midDelay: -0.55s;
  --ty: -97.8147600734%;
  --hue: 294;
}
.loader div:nth-child(100) {
  --rz: 297deg;
  --delay: -7.425s;
  --midDelay: -0.525s;
  --ty: -98.7688340595%;
  --hue: 297;
}
.loader div:nth-child(101) {
  --rz: 300deg;
  --delay: -7.5s;
  --midDelay: -0.5s;
  --ty: -86.6025403784%;
  --hue: 300;
}
.loader div:nth-child(102) {
  --rz: 303deg;
  --delay: -7.575s;
  --midDelay: -0.475s;
  --ty: -62.932039105%;
  --hue: 303;
}
.loader div:nth-child(103) {
  --rz: 306deg;
  --delay: -7.65s;
  --midDelay: -0.45s;
  --ty: -30.9016994375%;
  --hue: 306;
}
.loader div:nth-child(104) {
  --rz: 309deg;
  --delay: -7.725s;
  --midDelay: -0.425s;
  --ty: 5.2335956243%;
  --hue: 309;
}
.loader div:nth-child(105) {
  --rz: 312deg;
  --delay: -7.8s;
  --midDelay: -0.4s;
  --ty: 40.6736643076%;
  --hue: 312;
}
.loader div:nth-child(106) {
  --rz: 315deg;
  --delay: -7.875s;
  --midDelay: -0.375s;
  --ty: 70.7106781187%;
  --hue: 315;
}
.loader div:nth-child(107) {
  --rz: 318deg;
  --delay: -7.95s;
  --midDelay: -0.35s;
  --ty: 91.3545457643%;
  --hue: 318;
}
.loader div:nth-child(108) {
  --rz: 321deg;
  --delay: -8.025s;
  --midDelay: -0.325s;
  --ty: 99.8629534755%;
  --hue: 321;
}
.loader div:nth-child(109) {
  --rz: 324deg;
  --delay: -8.1s;
  --midDelay: -0.3s;
  --ty: 95.1056516295%;
  --hue: 324;
}
.loader div:nth-child(110) {
  --rz: 327deg;
  --delay: -8.175s;
  --midDelay: -0.275s;
  --ty: 77.7145961457%;
  --hue: 327;
}
.loader div:nth-child(111) {
  --rz: 330deg;
  --delay: -8.25s;
  --midDelay: -0.25s;
  --ty: 50%;
  --hue: 330;
}
.loader div:nth-child(112) {
  --rz: 333deg;
  --delay: -8.325s;
  --midDelay: -0.225s;
  --ty: 15.643446504%;
  --hue: 333;
}
.loader div:nth-child(113) {
  --rz: 336deg;
  --delay: -8.4s;
  --midDelay: -0.2s;
  --ty: -20.7911690818%;
  --hue: 336;
}
.loader div:nth-child(114) {
  --rz: 339deg;
  --delay: -8.475s;
  --midDelay: -0.175s;
  --ty: -54.4639035015%;
  --hue: 339;
}
.loader div:nth-child(115) {
  --rz: 342deg;
  --delay: -8.55s;
  --midDelay: -0.15s;
  --ty: -80.9016994375%;
  --hue: 342;
}
.loader div:nth-child(116) {
  --rz: 345deg;
  --delay: -8.625s;
  --midDelay: -0.125s;
  --ty: -96.5925826289%;
  --hue: 345;
}
.loader div:nth-child(117) {
  --rz: 348deg;
  --delay: -8.7s;
  --midDelay: -0.1s;
  --ty: -99.4521895368%;
  --hue: 348;
}
.loader div:nth-child(118) {
  --rz: 351deg;
  --delay: -8.775s;
  --midDelay: -0.075s;
  --ty: -89.1006524188%;
  --hue: 351;
}
.loader div:nth-child(119) {
  --rz: 354deg;
  --delay: -8.85s;
  --midDelay: -0.05s;
  --ty: -66.9130606359%;
  --hue: 354;
}
.loader div:nth-child(120) {
  --rz: 357deg;
  --delay: -8.925s;
  --midDelay: -0.025s;
  --ty: -35.8367949545%;
  --hue: 357;
}

Frontend Forever App